<template>
  <div>
    <r-search
      :searchForm="searchForm2"
      :searchHandle="searchHandle2"
      :searchData="searchData2"
    />
    <r-search
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :searchData="searchData"
    />
    <r-table
      :isSelection="true"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      @refresh="init()"
    ></r-table>
    <r-form
      :formRules="formRulesActive"
      :formHandle="formHandleActive"
      :formData="formDataActive"
      :formCols="formColsActive"
      ref="elFormActive"
      labelWidth="200px"
      dialogWidth="1000px"
      :isHandle="true"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchData: {
        name: "",
        equipmentNo: "",
        equipmentNo: "",
        merchantId: ""
      },
      searchForm: [
        {
          type: "input",
          prop: "name",
          placeholder: "Device Name",
          width: 150
        },
        {
          type: "input",
          prop: "equipmentNo",
          placeholder: "Device Number",
          width: 150
        },
        // {
        //     type: 'select',
        //     prop: 'typeId',
        //     placeholder: '设备Type',
        //     width: 150,
        //     options: [
        //         {
        //             label: '单柜门',
        //             value: '1'
        //         },
        //         {
        //             label: '双柜门',
        //             value: '2',
        //         },
        //     ]
        // },
        // {
        //     type: 'select',
        //     prop: 'operatorId',
        //     placeholder: '所属Operator',
        //     width: 150,
        //     options: [
        //     ]
        // },
        {
          type: "select",
          prop: "merchantId",
          placeholder: "所属商家",
          width: 150,
          options: []
        }
      ],
      searchHandle: [
        {
          label: "Search",
          type: "success",
          icon: "el-icon-search",
          handle: e => this.init(this.tp)
        },
        {
          label: "Reset",
          icon: "el-icon-refresh-right",
          handle: e => this.searchFromReset()
        }
      ],
      searchData2: {
        typeId: "生鲜柜"
      },
      searchForm2: [
        {
          type: "select",
          prop: "typeId",
          placeholder: "设备Type",
          width: 150,
          options: [
            {
              label: "生鲜柜",
              value: "1"
            },
            {
              label: "自提柜",
              value: "2"
            },
            {
              label: "组合柜",
              value: "3"
            }
          ],
          change: e => {
            this.init(e);
            this.tp = e;
          }
        }
      ],
      searchHandle2: [],
      tableData: [],
      tableCols: [
        {
          label: "设备Type",
          prop: "typeId",
          formatter: e => (e.typeId == 1 ? "单柜门" : "双柜门")
        },
        {
          label: "Device Name",
          prop: "name"
        },
        {
          label: "Device Number",
          prop: "equipmentNo"
        },
        {
          label: "所属Operator",
          prop: "operatorName"
          // theme: e => e.opStatus == 'Frozen' ? 'danger' : 'primary',
          // type: "tag",
        },
        {
          label: "所属商家",
          prop: "merchantName"
        },
        {
          label: "绑定时间",
          prop: "createdTime"
        },
        {
          label: "Operations",
          type: "button",
          btnList: [
            {
              label: "Cancel绑定",
              type: "danger",
              icon: "el-icon-circle-close",
              isShow: e => (e.equipmentNo ? true : false),
              handle: row => this.elFormDetailActive(row)
            }
          ]
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 },
      //Forbidden恢复
      formDataActive: {
        // isActive: "",
      },
      formColsActive: [
        { label: "Confirm要Cancel绑定选定项目？", width: 350, prop: "isActive" }
        // { type: "input", label: "确认密码", placeholder: 'Please Input确认密码', width: 350, prop: "enterPassword" },
      ],
      formRulesActive: {},
      formHandleActive: [
        {
          label: "Cancel",
          handle: e => this.elFormVisibleActive()
        },
        {
          label: "Confirm",
          type: "primary",
          handle: e => this.elFormSubmit()
        }
      ]
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    async init(e) {
      let param = {
        ...this.searchData,
        ...this.tablePage,
        opId: this.$route.query.id
      };
      if (e) {
        if (e == 1) {
          let res = await this.api.opDevlist(param);
          if (res) {
            this.tableData = res.data.list;
            this.tablePage.total = res.data.total;
          }
        } else if (e == 2) {
          let res = await this.api.opDevlist2(param);
          if (res) {
            this.tableData = res.data.list;
            this.tablePage.total = res.data.total;
          }
        } else if (e == 3) {
          let res = await this.api.opDevlist3(param);
          if (res) {
            this.tableData = res.data.list;
            this.tablePage.total = res.data.total;
          }
        }
      } else {
        let res = await this.api.opDevlist(param);
        if (res) {
          this.tableData = res.data.list;
          this.tablePage.total = res.data.total;
        }
      }
      let operatorId = "";
      let resOpt = await this.api.getOperatorList({});
      if (resOpt) {
        operatorId = resOpt.data.operatorId;
        this.searchForm[3].options = [];
        for (let i = 0; i < resOpt.data.length; i++) {
          this.searchForm[3].options.push({
            label: resOpt.data[i].name,
            value: resOpt.data[i].operatorId
          });
        }
      }
      // let resAgent = await this.api.getAgentList({
      //     userId: operatorId
      // })
      let resMerchant = await this.api.getMerchantList({
        userId: operatorId
      });
      // if (resAgent) {
      //     this.searchForm[3].options = []
      //     // this.searchForm[2].options = resAgent.data
      //     for (let i = 0; i < resAgent.data.length; i++) {
      //         this.searchForm[3].options.push({
      //             label: resAgent.data[i].name,
      //             value: resAgent.data[i].agentId
      //         })
      //     }
      // }
      if (resMerchant) {
        this.searchForm[4].options = [];
        for (let i = 0; i < resMerchant.data.length; i++) {
          this.searchForm[4].options.push({
            label: resMerchant.data[i].name,
            value: resMerchant.data[i].merchantId
          });
        }
      }
    },
    async elFormSubmit(e) {
      //查询
      console.log(this.tp);
      if (this.tp == 1) {
        let res = await this.api.unbindOp(this.formDataActive);
        if (res) {
          this.init(this.tp);
          this.elFormVisibleActive();
        }
      }
      if (this.tp == 2) {
        let res = await this.api.unbindOp2(this.formDataActive);
        if (res) {
          this.init(this.tp);
          this.elFormVisibleActive();
        }
      }
      if (this.tp == 3) {
        let res = await this.api.unbindOp3(this.formDataActive);
        if (res) {
          this.init(this.tp);
          this.elFormVisibleActive();
        }
      } else {
        let res = await this.api.unbindOp(this.formDataActive);
        if (res) {
          this.init(this.tp);
          this.elFormVisibleActive();
        }
      }
    },
    elFormDetailActive(row) {
      Object.keys(this.formDataActive).forEach(key => {
        this.formDataActive[key] = row[key];
      });
      // unbindOp
      this.formDataActive.id = row.id;
      console.log(this.formDataActive);
      this.elFormVisibleActive();
    },
    elFormVisibleActive(tit) {
      if (this.$refs.elFormActive.$refs.ruleFormActive) {
        this.$refs.elFormActive.$refs.ruleFormActive.resetFields();
        this.$data.formDataActive = this.$options.data.call(
          this
        ).formDataActive;
      }
      this.$refs.elFormActive.dialogFormVisible = !this.$refs.elFormActive
        .dialogFormVisible;
      this.$refs.elFormActive.dialogFormTitle = tit
        ? tit
        : this.formDataActive.id
        ? "Edit"
        : "Add";
      if (this.$refs.elFormActive.dialogFormVisible) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve();
          }, 2000);
        });
      }
    }
  }
};
</script>
<style scoped lang="scss">
.el-icon-search {
  margin-right: 10px;
}
.Tip {
  margin-left: 20px;
}
</style>
